<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>过滤器</title>
    <script src="../js/vue.js">
    </script>
    <style>
        .v-cloak {
            display: none;
        }
    </style>
</head>
<body>

<div id="root">
    <!--  v-text 指令-->
    <div v-text="name"></div>

    <!--  v-html指令 使用v-html指令可以识别html结构-->
    <div v-html="html"></div>

    <!--
    v-cloak指令是一个特殊属性，vue实例创建完毕并接管容器后会删除v-cloak属性
    使用css配合v-cloak属性可以解决网速慢时展示出{{xxx}}的问题
    -->
    <div v-cloak></div>

    <!--    v-once 指令它的作用是在模板渲染时只渲染一次元素或组件，之后即使数据发生变化，也不会重新渲染。这可以用于优化性能，特别是在处理大量数据或频繁更新的场景中-->
    <h2 v-once>初始numbner:{{number}}</h2>
    <h2>当前number:{{number}}</h2>
    <button @click="number++">点击使number+1</button>

    <!--
    v-pre 指令是 Vue.js 中的一个内置指令，它的作用是跳过这个元素和它的子元素的编译过程。使用 v-pre 指令的元素将不会被编译为虚拟 DOM，
    而是直接作为静态内容输出。这可以用于提高性能，特别是在处理大量静态内容时
    -->
    <h2 v-pre>hello,world</h2>
    <h2>当前number:{{number}}</h2>
    <button @click="number++">点击使number+1</button>
</div>

<script type="text/javascript">
    Vue.config.printWarnings = false;

    const vm = new Vue({
        el: '#root',
        data: {
            name: 'hello',
            html: '<h3>你好</h3>',
            number: 1
        },

    })

</script>
</body>

</html>